<template>
  <div class="login-container">
    <div class="title-container">
<!--      <img class="logo" src="../../assets/login/logo.png"/>-->
    </div>
    <div class="login-box">
      <div class="tab">
        <div class="tab-select" :class="{cur:select==1}" @click="select=1">密码登录</div>
<!--        <div class="tab-select" :class="{cur:select==2}" @click="select=2">短信登录</div>-->
      </div>
      <login-password v-if="select==1"></login-password>
      <login-code v-if="select==2"></login-code>
    </div>
    <div class="copyright">XXX有限公司版权所有 闽ICP备1500号</div>
    <div id="indexLizi"></div>
  </div>
</template>
<script>
import {validUsername} from '@/utils/validate'
import {THREE} from '@/utils/three.min'
import loginPassword from '@/views/login/components/login-password'
import loginCode from '@/views/login/components/login-code'

var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
var container;
var camera, scene, renderer;
var particles, particle, count = 0;
var mouseX = 0, mouseY = -350;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
export default {
  name: 'Login',
  components: {loginPassword, loginCode},
  data() {
    return {
      select: 1
    }
  },
  mounted() {
    //3D
    //this.init();
    //this.animate();
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    //3D动画
    init() {
      container = document.createElement("div");
      // document.body.appendChild(container);
      document.getElementById("indexLizi").appendChild(container);
      camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 1, 10000);
      console.log(camera)
      container.style.cssText = "position:fixed;top:0;left:0;cursor:pointer;opacity:0.5;z-index:10000;";
      camera.position.z = 1000;
      scene = new THREE.Scene();
      particles = new Array();
      var PI2 = Math.PI * 2;
      var material = new THREE.ParticleCanvasMaterial({
        color: 0x1478F0,
        program: function (context) {
          context.beginPath();
          context.arc(1, 1, 2, 0, PI2, true);
          context.fill();
        }
      });

      var i = 0;
      for (var ix = 0; ix < AMOUNTX; ix++) {
        for (var iy = 0; iy < AMOUNTY; iy++) {
          particle = particles[i++] = new THREE.Particle(material);
          particle.position.x = ix * SEPARATION - AMOUNTX * SEPARATION / 2;
          particle.position.z = iy * SEPARATION - AMOUNTY * SEPARATION / 2;
          scene.add(particle);
        }
      }

      renderer = new THREE.CanvasRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      container.appendChild(renderer.domElement);

      document.addEventListener("mousemove", this.onDocumentMouseMove, false);
      document.addEventListener("touchstart", this.onDocumentTouchStart, false);
      document.addEventListener("touchmove", this.onDocumentTouchMove, false);

      window.addEventListener("resize", this.onWindowResize, false);
    },
    onWindowResize() {
      windowHalfX = window.innerWidth / 2;
      windowHalfY = window.innerHeight / 2;

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, window.innerHeight);
    },
    onDocumentMouseMove(event) {
      mouseX = event.clientX - windowHalfX;
      // mouseY = event.clientY - windowHalfY;
    },
    onDocumentTouchStart(event) {
      if (event.touches.length === 1) {
        event.preventDefault();
        mouseX = event.touches[0].pageX - windowHalfX;
        // mouseY = event.touches[0].pageY - windowHalfY;
      }
    },
    onDocumentTouchMove(event) {
      if (event.touches.length === 1) {
        event.preventDefault();
        mouseX = event.touches[0].pageX - windowHalfX;
        // mouseY = event.touches[0].pageY - windowHalfY;
      }
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.render();
    },
    render() {
      camera.position.x += (mouseX - camera.position.x) * 0.6;
      camera.position.y += (-mouseY - camera.position.y) * 0.6;
      camera.lookAt(scene.position);
      var i = 0;
      for (var ix = 0; ix < AMOUNTX; ix++) {
        for (var iy = 0; iy < AMOUNTY; iy++) {
          particle = particles[i++];
          particle.position.y =
            Math.sin((ix + count) * 0.3) * 50 +
            Math.sin((iy + count) * 0.5) * 50;
          particle.scale.x = particle.scale.y =
            (Math.sin((ix + count) * 0.3) + 1) * 2 +
            (Math.sin((iy + count) * 0.5) + 1) * 2;
        }
      }
      renderer.render(scene, camera);
      count += 0.1;
    }
  }
}
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
  min-height: 100%;
  width: 100%;
  text-align: center;
  // background-color: $bg;
  // background: url('http://v1.iviewui.com/dist/ddb81d457e66ab31d3a2e7726a5b793a.png');
  //background: url('../../assets/login/bg.jpg');
  background: #cbf0f6;
  overflow: hidden;
}

.logo {
  width: 160px;
  height: 160px;
  margin-top: 80px;
}

.login-box {
  position: relative;
  width: 480px;
  max-width: 90%;
  min-width: 300px;
  padding: 40px 35px;
  margin: 40px auto;
  overflow: hidden;
  z-index: 100000;
  background: rgba(255, 255, 255, .6);
}

.tab {
  color: #fff;
  overflow: hidden;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.tab-select {
  position: relative;
  float: left;
  cursor: pointer;
  padding-bottom: 20px;
  margin-right: 30px;
}

.tab-select.cur {
  color: #6dcdb0;
}

.tab-select.cur:after {
  content: '';
  position: absolute;
  width: 80%;
  height: 2px;
  bottom: 0;
  left: 50%;
  margin-left: -40%;
  background: #6dcdb0;
}
</style>
<style>
#indexLizi {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

#indexLizi div {
  position: relative;
  top: 180px !important;
}

.copyright {
  color: #fff;
  opacity: 0.4;
  font-size: 12px;
  margin-top: 100px;
  margin-bottom: 50px;
}
</style>
